<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>日常保洁</title>
	</head>
	<style>
	body,p{
		margin:0px;
		padding:0px;
	}
	ul{
		list-style: none;
		padding:0px;
		margin:0px;
	}
	.serContent{
		margin-top:0px;
		padding-top:0px;
	}
	.serContent ul:nth-child(1){
		border:1px solid #E8E8E8;
		text-align: center;
	}
	.serContent ul:nth-child(1) li:nth-child(1){
		color:#606060;
		text-align: left; 
		background-color: #E8E8E8;
		padding-left:2%; 
		height:100px; 
		line-height: 100px;
		margin-bottom: 15px; 
		font-size: 44px; 
		border:1px solid #DEDEDE;
	}
	.serContent ul:nth-child(1) li:nth-child(2){
		text-align: center;
	}
	.serContent ul:nth-child(1) li:nth-child(3){
		font-size:40px;
		margin-top:35px;
		margin-bottom: 10px; 
		color:#A1A1A1; 
		width:67%
	}
	.serItemRow{
		margin-bottom: 5px;
	}
	.serItemCell{
		display:inline-block; 
		margin-right: 5px;
		border:1px solid #DDDDDD;
		text-align: center;
		vertical-align: middle;
		border-radius: 12px;
		width:30%;
		font-size:41px;
		height: 250px;
		text-align: center;
		align-content: center;
	}
	.serItemCell.active{
		background-color:#FC605E;
		color:white;
	}
	.serItemCell.active span:nth-child(2){
		color:white;
	}
	.serItemCell span{
		display: block;
	}
	.serItemCell span:nth-child(1){
		display: block;
		margin-top:80px;
	}
	.serItemCell span:nth-child(2){
		color:red;
	}
	.serContent ul:nth-child(2){
		padding-left:0px;
		height: 35%;
		background-color:#EFEFEF;
		padding-top: 3px; 
		border-top: 1px solid #E3E3E3;
		
	}
	.serScope,.serStandard{
		border-bottom: 1px solid #E3E3E3;
	}
	.serStandard>div,.serScope>div{
	    background-color: #E4E4E4;
	    padding-top: 3%;
	    padding-bottom: 3%;
	    padding-left: 2%;
	    font-size: 44px;
	    color: #616161;
	    margin-top: 3%;
	    border: 1px solid #E3E3E3;
	    
	}
	.serStandard>p,.serScope>p{
		background-color: white; 
		color:#ADADAD;
		padding-left:3%;
		padding-right: 3%; 
		padding-top: 3%;
		padding-bottom: 3%;
		
		font-size: 38px; 
		
	}
	</style>
	<body>
	<!--图片-->
	<div style="height:500px;margin-bottom: 15px;"><img style="width:100%; height:100%;" src="../../static/img/sertop.png"></div>
	<div class="serContent">
		<!--服务条目-->
		<ul style="">
			<li style="">服务项目</li>
			<li>
				<!--第一行-->
				<!--
				<div class="serItemRow">
					<div class="serItemCell active" onclick="choiceItem(this);">
						<span data-val="0.01">0.01小时（测试商品）</span>
						<span data-val="0.01">￥0.01</span>
					</div>
					<div class="serItemCell" onclick="choiceItem(this);">
						<span data-val="0.01">0.01小时（测试商品）</span>
						<span data-val="0.01">￥0.01</span>
					</div>
					<div class="serItemCell" onclick="choiceItem(this);">
						<span data-val="0.01">0.01小时（测试商品）</span>
						<span data-val="0.01">￥0.01</span>
					</div>
				</div>
				-->
				<!--第一行-->
				<div class="serItemRow">
					<div class="serItemCell" onclick="choiceItem(this);">
						<span data-val="2">2小时</span>
						<span data-val="60">￥60</span>
					</div>
					<div class="serItemCell" onclick="choiceItem(this);">
						<span data-val="2.5">2.5小时</span>
						<span data-val="72.5">￥72.5</span>
					</div>
					<div class="serItemCell"  onclick="choiceItem(this);">
						<span data-val="3">3小时</span>
						<span data-val="75">￥75</span>
					</div>
				</div>
				<!--第二行-->
				<div class="serItemRow">
					<div class="serItemCell" onclick="choiceItem(this);">
						<span data-val="3.5">3.5小时</span>
						<span data-val="87.5">￥87.5</span>
					</div>
					<div class="serItemCell" onclick="choiceItem(this);">
						<span data-val="4">4小时</span>
						<span data-val="100">￥100</span>
					</div>
					<div class="serItemCell" onclick="choiceItem(this);">
						<span data-val="4.5">4.5小时</span>
						<span data-val="112.5">￥112.5</span>
					</div>
				</div>
				<!--第三行-->
				<div class="serItemRow">
					<div class="serItemCell" onclick="choiceItem(this);">
						<span data-val="5">5小时</span>
						<span data-val="125">￥125</span>
					</div>
					<div class="serItemCell" onclick="choiceItem(this);">
						<span data-val="5.5">5.5小时</span>
						<span data-val="137.5">￥137.5</span>
					</div>
					<div class="serItemCell" onclick="choiceItem(this);">
						<span data-val="6">6小时</span>
						<span data-val="150">￥150</span>
					</div>
				</div>
			</li>
			<li>注：最终收费按实际服务时长计算</li>
		</ul>
		<!--服务文字说明-->
		<ul style="">
			<!--服务范围-->
			<li class="serScope">
				<div>服务范围</div>
				<p>
					室内整体清洁，物品归位，内墙清洁，更换垃圾袋，
					床底柜底除尘，门面、墙面、踢脚线除尘；床铺整理、地毯除尘；厨房、
					浴室台面处理。
				</p>
			</li>
			<!--服务标准-->
			<li class="serStandard" >
				<div>服务标准</div>
				<p >
					木地板无胶渍、洁净；
					墙砖和地砖无尘土、无漆点、无污渍；台面无水痕、无手印、无污渍、光亮洁净。
					室内物品整齐归位，离开时带走垃圾。
				</p>
			</li>
		</ul>
	</div>
	</body>
	<script>
	var service={};
	
	/**页面初始化service值**/
	getCheckedObj();
	
	/**页面点击事件**/
	function choiceItem(obj){
		var choicedList = document.getElementsByClassName("active");
		//防止页面有多个active出错
		for(var i =0;i<choicedList.length;i++){
			var choiced = choicedList[i];
			choiced.className="serItemCell";
		}
		obj.className="serItemCell active";
		getCheckedObj(obj);
	}
	/**统一处理点击dom 获得值**/
	function getCheckedObj(item){
		var obj;
		if(item){
			 obj = item;
		}else{
			obj = document.getElementsByClassName("active")[0]; 
		}
		var title = obj.children[0].innerHTML;
		var hour  = obj.children[0].getAttribute("data-val");
		var price = obj.children[1].getAttribute("data-val");
		service ={};
		service.TITLE=title;
		service.HOUR = hour;
		service.SELLPRICE = price;
		service.COUNT = 1;
	}
	function getItem(){
		return JSON.stringify(service);
	}
	</script>
</html>
